<template>
  <div>
    <div class="shopcart">
      <!--1.没有购买商品时，购物车全部灰色
                2.当购买商品时，购物车右上角回有商品件数，并且会按照商品计算出价格，
                3.当达到配送金额显示去结算，不然就显示还差XX元起送。 
            -->
      <div class="content">
        <!-- 左边的商品和logo -->
        <div class="content-left">
          <div class="logo-wrapper">
            <div class="logo">
              <!-- :class="{ highlight: totalCount > 0 }" -->
             <van-badge :content="num">
              <van-icon name="shopping-cart" size="50px"/>
              </van-badge>
            </div>
          </div>
          <div class="price">￥{{ totalPrice }}</div>
          <div class="desc">另需配送费￥{{ deliveryPrice }}元</div>
        </div>
          <!-- 
              1. totalPrice是商品总和，遍历所选择的商品，拿到商品的价格和数量计算而得。
              2.TotalCount是计算商品的总数量，便于显示在购物车部分。
           -->
        
        <!-- 右边的价格起送 -->
        <div class="content-right">
          <div class="pay">{{ payDesc }}</div>
        </div>
      </div>
      <!-- 引入一个组件弹出来 -->
      <div class="ball-container"></div>
    </div>
  </div>
</template>

<script>
import { shopCart } from '@/api/index2';
export default {
  name:"shopCar",
  data(){
    return{
      num:count,
      selectFoods:[],
      deliveryPrice:'',
      minPrice:''
    }
  },
  // 通过props传入。SelectFoods表示已选择的商品，是通过用户选择动态获取的，还有配送费delivery Price和最小起送费minPrice
  // props: {
  //   selectFoods: {
  //     type: Array,
  //     default() {
  //       return [];
  //     },
  //   },
  //   deliveryPrice: {
  //     type: Number,
  //     default: 0,
  //   },
  //   minPrice: {
  //     type: Number,
  //     default: 0,
  //   },
  // },
  computed: {
    totalPrice() {
      // 商品总价和
      let total = 0;
      this.selectFoods.forEach((food) => {
        total += food.price * food.count;
      });
      return total;
    },
    totalCount() {
      // 总数量
      let count = 0;
      this.selectFoods.forEach((food) => {
        count += food.count;
      });
      return count;
    },
    payDesc() {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`;
      } else if (this.totalPrice < this.minPrice) {
        const diff = this.minPrice - this.totalPrice;
        return `还差￥${diff}元起送`;
      } else {
        return "去结算";
      }
    },
    payClass() {
      if (!this.totalCount || this.totalPrice < this.minPrice) {
        return "not-enough";
      } else {
        return "enough";
      }
    },
  },
  mounted(){
    shopCart({userid:localStorage.getItem("userId")}).then((res)=>{
      if(res.data.code==200){
        console.log(res.data.list);
      }
    })
  }
};
</script>

<style scoped>
.shopcart{
  height: 90px;
  background-color: rgba(87, 92, 96, 0.508);
}
</style>